<template>
  <div class="subtitle-processor">
    <!-- 页面标题 -->
    <t-card class="title-card" :bordered="false">
      <div class="title-content">
        <t-icon name="video" size="24px" />
        <div class="title-text">
          <h1>批量字幕处理器</h1>
          <p>快速上传、编辑和校准字幕文件</p>
        </div>
      </div>
    </t-card>

    <!-- 操作工具栏 -->
    <t-card class="toolbar-card" :bordered="false">
      <t-row :gutter="[16, 16]">
        <t-col :span="12">
          <t-space>
            <!-- 文件上传 -->
            <t-upload
              ref="uploadRef"
              v-model="uploadFiles"
              :show-upload-list="false"
              accept=".srt,.txt"
              :before-upload="handleFileUpload"
              :auto-upload="false"
              multiple
            >
              <t-button theme="primary" size="medium">
                <template #icon><t-icon name="upload" /></template>
                上传字幕文件
              </t-button>
            </t-upload>

            <!-- 粘贴字幕 -->
<!--            <t-button theme="success" size="medium" @click="pasteSubtitles">-->
<!--              <template #icon><t-icon name="paste" /></template>-->
<!--              粘贴内容-->
<!--            </t-button>-->

            <!-- 清空全部 -->
            <t-button theme="default" size="medium" @click="clearAll" :disabled="subtitleFiles.length === 0">
              <template #icon><t-icon name="delete" /></template>
              清空
            </t-button>
          </t-space>
        </t-col>
        <t-col :span="12" style="text-align: right;">
          <t-space>
            <!-- 语言选择 -->
            <span>目标语言</span>
            <t-select
              v-model="selectedLanguage"
              class="language-select"
              placeholder="目标语言"
              :options="languageOptions"
            />

            <!-- 批量校准 -->
            <t-button
              theme="primary"
              size="medium"
              @click="translateAllSubtitles"
              :loading="isTranslating"
              :disabled="getTotalSubtitles() === 0"
            >
              <template #icon><t-icon name="translate" /></template>
              {{ isTranslating ? `校准中 ${translationProgress}%` : '批量校准' }}
            </t-button>

            <!-- 批量导出 -->
            <t-dropdown :options="exportOptions" @click="handleExportClick">
              <t-button theme="warning" size="medium" :disabled="getTotalSubtitles() === 0">
                <template #icon><t-icon name="download" /></template>
                导出
                <t-icon name="chevron-down" />
              </t-button>
            </t-dropdown>
          </t-space>
        </t-col>
      </t-row>
    </t-card>

    <!-- 字幕文件列表 -->
    <div v-if="subtitleFiles.length > 0" class="file-list">
      <t-card
        v-for="(file, fileIndex) in subtitleFiles"
        :key="file.id"
        class="file-card"
        :bordered="false"
      >
        <template #header>
          <div class="file-header">
            <div class="file-info">
              <t-icon name="file-text" />
              <span class="file-name">{{ file.name }}</span>
              <t-tag theme="default" variant="outline">{{ file.subtitles.length }} 条</t-tag>
              <t-tag v-if="file.translating" theme="primary" variant="light">
                <t-loading size="12px" />
                校准中
              </t-tag>
            </div>
            <t-space>
              <t-button size="small" theme="primary" variant="text" @click="translateFile(fileIndex)">
                <template #icon><t-icon name="translate" /></template>
                校准此文件
              </t-button>
              <t-button size="small" theme="default" variant="text" @click="exportFile(fileIndex)">
                <template #icon><t-icon name="download" /></template>
                导出
              </t-button>
              <t-button size="small" theme="danger" variant="text" @click="deleteFile(fileIndex)">
                <template #icon><t-icon name="delete" /></template>
                删除
              </t-button>
            </t-space>
          </div>
        </template>

        <!-- 字幕表格 -->
        <t-table
          :data="getPagedSubtitles(fileIndex)"
          :columns="getTableColumns(fileIndex)"
          row-key="id"
          :selected-row-keys="file.selectedRows"
          size="small"
          stripe
          hover
          :pagination="file.pagination"
          @page-change="(pageInfo) => handlePageChange(fileIndex, pageInfo)"
          @page-size-change="(size, pageInfo) => handlePageSizeChange(fileIndex, size, pageInfo)"
        >
          <!-- 自定义状态列 -->
          <template #status="{ row }">
            <t-tag v-if="row.translating" theme="primary" variant="light">
              <t-loading size="12px" />
              校准中
            </t-tag>
            <t-tag v-else-if="row.error" theme="danger" variant="light">
              校准失败
            </t-tag>
            <t-tag v-else-if="row.text !== row.originalText" theme="success" variant="light">
              已校准
            </t-tag>
            <t-tag v-else theme="default" variant="light">
              未校准
            </t-tag>
          </template>

          <!-- 自定义原文列 -->
          <template #originalText="{ row }">
            <div class="text-content" :title="row.originalText">
              {{ truncateText(row.originalText, 50) }}
            </div>
          </template>

          <!-- 自定义译文列 -->
          <template #translatedText="{ row }">
            <div class="text-content translated" :title="row.text" v-if="row.text !== row.originalText">
              {{ truncateText(row.text, 50) }}
            </div>
            <span v-else class="no-translation">-</span>
          </template>

          <!-- 自定义操作列 -->
          <template #action="{ row, rowIndex }">
            <t-space size="small">
              <t-button theme="primary" variant="text" size="small" @click="editRow(fileIndex, row.originalIndex)">
                编辑
              </t-button>
              <t-button theme="danger" variant="text" size="small" @click="deleteRow(fileIndex, row.originalIndex)">
                删除
              </t-button>
            </t-space>
          </template>
        </t-table>
      </t-card>
    </div>

    <!-- 空状态 -->
    <t-card v-else class="empty-card" :bordered="false">
      <t-empty>
        <template #action>
          <t-space direction="vertical" align="center">
            <div class="empty-description">暂无字幕数据，开始批量处理</div>
            <t-space>
              <t-button theme="primary" @click="triggerFileUpload">
                <template #icon><t-icon name="upload" /></template>
                上传字幕文件
              </t-button>
<!--              <t-button theme="success" @click="pasteSubtitles">-->
<!--                <template #icon><t-icon name="paste" /></template>-->
<!--                粘贴内容-->
<!--              </t-button>-->
            </t-space>
          </t-space>
        </template>
      </t-empty>
    </t-card>

    <!-- 校准进度条 -->
    <t-affix v-if="isTranslating" :offset-bottom="20">
      <t-card class="progress-card">
        <div class="progress-info">
          <div class="progress-text">
            <span>批量校准进行中...</span>
            <span class="progress-detail">{{ currentTranslatingIndex }} / {{ subtitleFiles.length }} 文件</span>
          </div>
          <t-progress :percentage="translationProgress" size="small" />
        </div>
      </t-card>
    </t-affix>

    <!-- 编辑对话框 -->
    <t-dialog
      v-model:visible="editDialogVisible"
      header="编辑字幕"
      width="600px"
      :confirm-btn="{ content: '保存', theme: 'primary' }"
      @confirm="saveEditDialog"
    >
      <div class="edit-dialog-content">
        <div class="edit-field">
          <label>时间码：</label>
          <t-input v-model="editingSubtitle.timeCode" placeholder="00:00:00,000 --> 00:00:05,000" />
        </div>
        <div class="edit-field">
          <label>原文：</label>
          <t-textarea v-model="editingSubtitle.originalText" :autosize="{ minRows: 2 }" />
        </div>
        <div class="edit-field">
          <label>译文：</label>
          <t-textarea v-model="editingSubtitle.text" :autosize="{ minRows: 2 }" />
        </div>
      </div>
    </t-dialog>
  </div>
</template>

<script setup>
import { computed, ref, reactive } from 'vue'
import { MessagePlugin } from 'tdesign-vue-next'
import { translateSubs } from '@renderer/api/ttsApi'

// 响应式数据
const subtitleFiles = ref([]) // 改为文件数组，每个文件包含自己的字幕
const selectedLanguage = ref('zh-CN')
const isTranslating = ref(false)
const translationProgress = ref(0)
const currentTranslatingIndex = ref(0)
const uploadRef = ref(null)
const uploadFiles = ref([])
const editDialogVisible = ref(false)
const editingSubtitle = reactive({
  fileIndex: -1,
  subtitleIndex: -1,
  id: '',
  timeCode: '',
  originalText: '',
  text: ''
})

// 语言选项
const languages = [
  { code: 'en', name: '英语', flag: '🇺🇸' },
  { code: 'th', name: '泰语', flag: '🇹🇭' },
  { code: 'vi', name: '越南语', flag: '🇻🇳' },
  { code: 'zh-CN', name: '中文', flag: '🇨🇳' }
]

const languageOptions = computed(() =>
  languages.map((lang) => ({
    label: `${lang.flag} ${lang.name}`,
    value: lang.code
  }))
)

// 导出选项
const exportOptions = [
  {
    content: '分别导出各文件',
    value: 'separate'
  }
]

// 动态生成表格列配置（包含选择框）
const getTableColumns = (fileIndex) => [
  {
    colKey: 'id',
    title: 'ID',
    width: 60,
    align: 'center'
  },
  {
    colKey: 'timeCode',
    title: '时间码',
    width: 180,
    ellipsis: true
  },
  {
    colKey: 'originalText',
    title: '原文',
    width: 300,
    ellipsis: true
  },
  {
    colKey: 'translatedText',
    title: '译文',
    width: 300,
    ellipsis: true
  },
  {
    colKey: 'status',
    title: '状态',
    width: 100,
    align: 'center'
  },
  {
    colKey: 'action',
    title: '操作',
    width: 120,
    align: 'center',
    fixed: 'right'
  }
]

// 获取分页后的字幕数据
const getPagedSubtitles = (fileIndex) => {
  const file = subtitleFiles.value[fileIndex]
  if (!file || !file.pagination) return []

  const { current, pageSize } = file.pagination
  const startIndex = (current - 1) * pageSize
  const endIndex = startIndex + pageSize

  return file.subtitles.slice(startIndex, endIndex).map((subtitle, index) => ({
    ...subtitle,
    originalIndex: startIndex + index // 保存原始索引用于编辑和删除
  }))
}

// 解析SRT格式
const parseSRT = (content) => {
  const blocks = content.trim().split(/\n\s*\n/)
  return blocks
    .map((block, index) => {
      const lines = block.trim().split('\n')
      if (lines.length >= 3) {
        const id = parseInt(lines[0]) || index + 1
        const timeCode = lines[1]
        const text = lines.slice(2).join('\n')
        return {
          id,
          timeCode,
          text,
          originalText: text,
          translating: false,
          error: false
        }
      }
      return null
    })
    .filter(Boolean)
}

// 生成唯一文件ID
const generateFileId = () => {
  return Date.now() + Math.random().toString(36).substr(2, 9)
}

// 初始化文件分页配置
const initPaginationConfig = (subtitleCount) => ({
  current: 1,
  pageSize: 10,
  total: subtitleCount,
  showPageSize: true,
  pageSizeOptions: [5, 10, 20, 50, 100],
  size: 'small'
})

// 更新分页配置
const updatePaginationConfig = (fileIndex) => {
  const file = subtitleFiles.value[fileIndex]
  if (file && file.pagination) {
    const totalCount = file.subtitles.length
    file.pagination.total = totalCount

    // 如果当前页超出范围，重置到第一页
    const maxPage = Math.ceil(totalCount / file.pagination.pageSize) || 1
    if (file.pagination.current > maxPage) {
      file.pagination.current = 1
    }
  }
}

// 文件上传处理
const handleFileUpload = (file) => {
  const reader = new FileReader()
  reader.onload = (e) => {
    try {
      const parsedSubtitles = parseSRT(e.target.result)
      if (parsedSubtitles.length > 0) {
        // 创建新的文件对象
        const newFile = {
          id: generateFileId(),
          name: file.name || `字幕文件${subtitleFiles.value.length + 1}`,
          subtitles: parsedSubtitles,
          selectedRows: [],
          translating: false,
          pagination: initPaginationConfig(parsedSubtitles.length)
        }
        subtitleFiles.value.push(newFile)
        MessagePlugin.success(`成功导入文件 "${newFile.name}"，共 ${parsedSubtitles.length} 条字幕`)
      } else {
        MessagePlugin.error('未能解析字幕内容，请检查文件格式')
      }
    } catch (error) {
      MessagePlugin.error('字幕文件格式错误')
    }
  }
  reader.readAsText(file.raw || file, 'UTF-8')
  return false
}

// 处理分页变化
const handlePageChange = (fileIndex, pageInfo) => {
  const file = subtitleFiles.value[fileIndex]
  if (file && file.pagination) {
    file.pagination.current = pageInfo.current
  }
}

// 处理每页条数变化
const handlePageSizeChange = (fileIndex, size, pageInfo) => {
  const file = subtitleFiles.value[fileIndex]
  if (file && file.pagination) {
    file.pagination.pageSize = size
    file.pagination.current = pageInfo.current
    // 确保分页配置正确更新
    updatePaginationConfig(fileIndex)
  }
}

// 手动触发文件上传
const triggerFileUpload = () => {
  const input = uploadRef.value?.$el?.querySelector('input[type="file"]')
  if (input) {
    input.click()
  }
}

// 粘贴字幕内容
const pasteSubtitles = async () => {
  try {
    const text = await navigator.clipboard.readText()
    if (text.trim()) {
      const parsedSubtitles = parseSRT(text)
      if (parsedSubtitles.length > 0) {
        const newFile = {
          id: generateFileId(),
          name: `粘贴内容${subtitleFiles.value.length + 1}`,
          subtitles: parsedSubtitles,
          selectedRows: [],
          translating: false,
          pagination: initPaginationConfig(parsedSubtitles.length)
        }
        subtitleFiles.value.push(newFile)
        MessagePlugin.success(`成功导入粘贴内容，共 ${parsedSubtitles.length} 条字幕`)
      } else {
        MessagePlugin.error('粘贴的内容不是有效的SRT格式')
      }
    } else {
      MessagePlugin.warning('剪贴板内容为空')
    }
  } catch (error) {
    MessagePlugin.error('粘贴失败，请检查浏览器权限')
  }
}

// 清空全部
const clearAll = async () => {
  subtitleFiles.value = []
  MessagePlugin.success('已清空所有字幕文件')
}

// 删除文件
const deleteFile = async (fileIndex) => {
  const file = subtitleFiles.value[fileIndex]
  subtitleFiles.value.splice(fileIndex, 1)
  MessagePlugin.success('文件删除成功')
}

// 编辑行
const editRow = (fileIndex, subtitleIndex) => {
  const file = subtitleFiles.value[fileIndex]
  const subtitle = file.subtitles[subtitleIndex]

  if (subtitle) {
    editingSubtitle.fileIndex = fileIndex
    editingSubtitle.subtitleIndex = subtitleIndex
    editingSubtitle.id = subtitle.id
    editingSubtitle.timeCode = subtitle.timeCode
    editingSubtitle.originalText = subtitle.originalText
    editingSubtitle.text = subtitle.text
    editDialogVisible.value = true
  }
}

// 保存编辑
const saveEditDialog = () => {
  if (editingSubtitle.fileIndex >= 0 && editingSubtitle.subtitleIndex >= 0) {
    const subtitle = subtitleFiles.value[editingSubtitle.fileIndex].subtitles[editingSubtitle.subtitleIndex]
    subtitle.timeCode = editingSubtitle.timeCode
    subtitle.originalText = editingSubtitle.originalText
    subtitle.text = editingSubtitle.text
    MessagePlugin.success('保存成功')
  }
  editDialogVisible.value = false
}

// 删除行
const deleteRow = async (fileIndex, subtitleIndex) => {
  const file = subtitleFiles.value[fileIndex]
  file.subtitles.splice(subtitleIndex, 1)

  // 更新分页配置
  updatePaginationConfig(fileIndex)

  MessagePlugin.success('删除成功')
}

// 工具函数
const getTotalSubtitles = () => {
  return subtitleFiles.value.reduce((total, file) => total + file.subtitles.length, 0)
}

const truncateText = (text, length) => {
  return text.length > length ? text.substring(0, length) + '...' : text
}

// 将字幕数组转换为SRT格式字符串
const subtitlesToSRT = (subtitles) => {
  return subtitles
    .map((subtitle) => `${subtitle.id}\n${subtitle.timeCode}\n${subtitle.originalText}\n`)
    .join('\n')
}

// 解析校准后的SRT格式
const parseTranslatedSRT = (translatedContent) => {
  const blocks = translatedContent.trim().split(/\n\s*\n/)
  const translatedSubtitles = []

  blocks.forEach((block) => {
    const lines = block.trim().split('\n')
    if (lines.length >= 3) {
      const id = parseInt(lines[0])
      const timeCode = lines[1]
      const text = lines.slice(2).join('\n')
      translatedSubtitles.push({
        id,
        timeCode,
        text
      })
    }
  })

  return translatedSubtitles
}

// 校准单个文件
const translateFile = async (fileIndex) => {
  const file = subtitleFiles.value[fileIndex]
  if (file.subtitles.length === 0) {
    MessagePlugin.warning('该文件没有字幕可校准')
    return
  }

  file.translating = true

  // 将所有字幕设置为校准中状态
  file.subtitles.forEach(subtitle => {
    subtitle.translating = true
    subtitle.error = false
  })

  try {
    // 将整个文件的字幕转换为SRT格式
    const srtContent = subtitlesToSRT(file.subtitles)

    // 发送整体校准请求
    const response = await translateSubs(srtContent, 'auto', selectedLanguage.value)

    if (response && response.data) {
      try {
        // 解析校准后的SRT内容
        const translatedSubtitles = parseTranslatedSRT(response.data)

        // 更新原字幕的校准内容
        file.subtitles.forEach((subtitle, index) => {
          const translated = translatedSubtitles.find(t => t.id === subtitle.id)
          if (translated) {
            subtitle.text = translated.text
            // 如果时间码也被校准修改了，可以选择是否更新
            // subtitle.timeCode = translated.timeCode
          } else {
            // 如果没有找到对应的校准，保持原文
            console.warn(`未找到ID ${subtitle.id} 的校准`)
          }
        })

        MessagePlugin.success(`文件 "${file.name}" 校准完成！`)
      } catch (parseError) {
        console.error('解析校准结果失败:', parseError)
        MessagePlugin.error('校准结果解析失败，请检查返回格式')
        // 设置所有字幕为错误状态
        file.subtitles.forEach(subtitle => {
          subtitle.error = true
        })
      }
    } else {
      throw new Error('校准响应格式错误')
    }
  } catch (error) {
    MessagePlugin.error('校准过程中发生错误')
    console.error('校准失败:', error)
    // 设置所有字幕为错误状态
    file.subtitles.forEach(subtitle => {
      subtitle.error = true
    })
  } finally {
    // 清除所有字幕的校准中状态
    file.subtitles.forEach(subtitle => {
      subtitle.translating = false
    })
    file.translating = false
  }
}

// 批量校准所有文件
const translateAllSubtitles = async () => {
  if (getTotalSubtitles() === 0) {
    MessagePlugin.warning('没有字幕可校准')
    return
  }

  isTranslating.value = true
  translationProgress.value = 0
  currentTranslatingIndex.value = 0

  try {
    const totalFiles = subtitleFiles.value.length
    let processedFiles = 0

    for (const file of subtitleFiles.value) {
      file.translating = true

      // 将所有字幕设置为校准中状态
      file.subtitles.forEach(subtitle => {
        subtitle.translating = true
        subtitle.error = false
      })

      try {
        // 将整个文件的字幕转换为SRT格式
        const srtContent = subtitlesToSRT(file.subtitles)

        // 发送整体校准请求
        const response = await translateSubs(srtContent, 'auto', selectedLanguage.value)

        if (response && response.data) {
          try {
            // 解析校准后的SRT内容
            const translatedSubtitles = parseTranslatedSRT(response.data)

            // 更新原字幕的校准内容
            file.subtitles.forEach((subtitle, index) => {
              const translated = translatedSubtitles.find(t => t.id === subtitle.id)
              if (translated) {
                subtitle.text = translated.text
              } else {
                console.warn(`文件 ${file.name} 未找到ID ${subtitle.id} 的校准`)
              }
            })
          } catch (parseError) {
            console.error(`文件 ${file.name} 解析校准结果失败:`, parseError)
            // 设置所有字幕为错误状态
            file.subtitles.forEach(subtitle => {
              subtitle.error = true
            })
          }
        } else {
          throw new Error('校准响应格式错误')
        }
      } catch (error) {
        console.error(`文件 ${file.name} 校准失败:`, error)
        // 设置所有字幕为错误状态
        file.subtitles.forEach(subtitle => {
          subtitle.error = true
        })
      } finally {
        // 清除所有字幕的校准中状态
        file.subtitles.forEach(subtitle => {
          subtitle.translating = false
        })
        file.translating = false
      }

      processedFiles++
      currentTranslatingIndex.value = processedFiles
      translationProgress.value = Math.round((processedFiles / totalFiles) * 100)
    }

    MessagePlugin.success('批量校准完成！')
  } catch (error) {
    MessagePlugin.error('批量校准过程中发生错误')
    console.error('批量校准失败:', error)
  } finally {
    isTranslating.value = false
    translationProgress.value = 0
    currentTranslatingIndex.value = 0
  }
}

// 导出单个文件
const exportFile = (fileIndex) => {
  const file = subtitleFiles.value[fileIndex]
  if (file.subtitles.length === 0) {
    MessagePlugin.warning('该文件没有内容可导出')
    return
  }

  const srtContent = file.subtitles
    .map((subtitle) => `${subtitle.id}\n${subtitle.timeCode}\n${subtitle.text}\n`)
    .join('\n')

  const blob = new Blob([srtContent], { type: 'text/plain;charset=utf-8' })
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url

  // 保持原文件名，添加语言标识
  const fileName = file.name.replace(/\.[^/.]+$/, '') // 移除扩展名
  a.download = `${fileName}_${selectedLanguage.value}_${Date.now()}.srt`

  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
  URL.revokeObjectURL(url)

  MessagePlugin.success(`文件 "${file.name}" 导出成功`)
}

// 处理导出点击
const handleExportClick = (data) => {
  if (data.value === 'separate') {
    exportAllFiles()
  } else if (data.value === 'merge') {
    exportMergedFile()
  }
}

// 分别导出所有文件
const exportAllFiles = () => {
  subtitleFiles.value.forEach((file, index) => {
    setTimeout(() => {
      exportFile(index)
    }, index * 100) // 延迟避免同时下载
  })
}

// 合并导出所有文件
const exportMergedFile = () => {
  if (getTotalSubtitles() === 0) {
    MessagePlugin.warning('没有内容可导出')
    return
  }

  let allSubtitles = []
  let currentId = 1

  subtitleFiles.value.forEach(file => {
    file.subtitles.forEach(subtitle => {
      allSubtitles.push({
        ...subtitle,
        id: currentId++
      })
    })
  })

  const srtContent = allSubtitles
    .map((subtitle) => `${subtitle.id}\n${subtitle.timeCode}\n${subtitle.text}\n`)
    .join('\n')

  const blob = new Blob([srtContent], { type: 'text/plain;charset=utf-8' })
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = `merged_subtitles_${selectedLanguage.value}_${Date.now()}.srt`
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
  URL.revokeObjectURL(url)

  MessagePlugin.success('合并导出成功')
}
</script>

<style scoped>
.subtitle-processor {
  max-width: 1600px;
  margin: 0 auto;
  padding: 20px;
  background-color: var(--td-bg-color-page);
  min-height: 100vh;
}

.subtitle-processor {
  height: auto;
  overflow: visible;
}

.title-card {
  margin-bottom: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.title-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.title-text h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
}

.title-text p {
  margin: 4px 0 0 0;
  opacity: 0.9;
  font-size: 14px;
}

.toolbar-card {
  margin-bottom: 20px;
}

.language-select {
  width: 140px;
}

.file-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* 添加垂直滚动支持 */
  height: 720px;
  overflow-y: auto;
  padding-right: 8px;
}

/* 为文件列表添加滚动条样式 */
.file-list::-webkit-scrollbar {
  width: 6px;
}

.file-list::-webkit-scrollbar-track {
  background: var(--td-bg-color-container);
  border-radius: 3px;
}

.file-list::-webkit-scrollbar-thumb {
  background: var(--td-gray-color-6);
  border-radius: 3px;
}

.file-list::-webkit-scrollbar-thumb:hover {
  background: var(--td-gray-color-8);
}

.file-card {
  border-left: 4px solid var(--td-brand-color);
  flex-shrink: 0; /* 防止卡片被压缩 */
}

.file-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
}

.file-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.file-name {
  font-size: 16px;
  color: var(--td-text-color-primary);
}

.text-content {
  line-height: 1.4;
}

.text-content.translated {
  color: var(--td-success-color);
}

.no-translation {
  color: var(--td-text-color-placeholder);
}

.empty-card {
  text-align: center;
  padding: 40px 20px;
}

.empty-description {
  color: var(--td-text-color-placeholder);
  margin-bottom: 20px;
}

.progress-card {
  background: var(--td-bg-color-container);
  box-shadow: var(--td-shadow-3);
}

.progress-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.progress-text {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: var(--td-text-color-primary);
}

.progress-detail {
  color: var(--td-text-color-placeholder);
  font-size: 12px;
}

.edit-dialog-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.edit-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.edit-field label {
  font-weight: 500;
  color: var(--td-text-color-primary);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .subtitle-processor {
    padding: 12px;
  }

  .stats-row :deep(.t-col) {
    margin-bottom: 12px;
  }

  .file-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .file-info {
    flex-wrap: wrap;
  }

  .file-list {
    max-height: calc(100vh - 500px);
  }
}
</style>
